<template>
  <div class="container">
    <div class="content" v-if="videoForm.encode4">
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">司机：</div>
          <div class="text-value"v-if="videoForm.encodeSj||videoForm.encode11">{{ videoForm.encodeSj?videoForm.encodeSj:videoForm.encode11 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">辆数：</div>
          <div class="text-value" v-if="videoForm.encode25">{{ videoForm.encode25 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">主断状态：</div>
          <div class="text-value" v-if="videoForm.encode32">{{ videoForm.encode32 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">副司机：</div>
          <div class="text-value" v-if="videoForm.encodeFsj">{{ videoForm.encodeFsj }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">总重：</div>
          <div class="text-value" v-if="videoForm.encode23">{{ videoForm.encode23 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">重联信息：</div>
          <div class="text-value" v-if="videoForm.encode34">{{ videoForm.encode34 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">交路号：</div>
          <div class="text-value" v-if="videoForm.encode14">{{ videoForm.encode14 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">计长：</div>
          <div class="text-value" v-if="videoForm.encode24">{{ videoForm.encode24 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">手柄级位：</div>
          <div class="text-value" v-if="videoForm.encode33">{{ videoForm.encode33 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">车站号：</div>
          <div class="text-value" v-if="videoForm.encode10">{{ videoForm.encode10 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">大闸指令：</div>
          <div class="text-value" v-if="videoForm.encode36">{{ videoForm.encode36 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">车站名：</div>
          <div class="text-value" v-if="videoForm.encode10">{{ videoForm.encode10 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">信息种类：</div>
          <div class="text-value" v-if="videoForm.encode21">{{ videoForm.encode21 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">小闸指令：</div>
          <div class="text-value" v-if="videoForm.encode36">{{ videoForm.encode36 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">机车号：</div>
          <div class="text-value" v-if="videoForm.encode5">{{ videoForm.encode5 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">信息机号：</div>
          <div class="text-value" v-if="videoForm.encode20">{{ videoForm.encode20 }}</div>
        </div>
      </div>
      <div class="item-container">
        <div class="text-box">
          <div class="text-key">时间：</div>
          <div class="text-value" v-if="videoForm.encode4">{{ videoForm.encode4 }}</div>
        </div>
      </div>
    </div>
    <div class="main" v-if="videoForm.encode5">
      <div class="left">
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">车次：</div>
            <div class="text-value" v-if="videoForm.encode8&&videoForm.encode9">{{ videoForm.encode8+videoForm.encode9 }}</div>
          </div>
        </div>
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">机车工况：</div>
            <div class="text-value" v-if="videoForm.encode19">{{ cabStatus[videoForm.encode19] }}</div>
          </div>
        </div>
        <!-- <div class="item-container">
          <div class="text-box">
            <div class="text-key">
              限速：
            </div>
            <div class="text-value">
              {{ videoForm.encode16 || 0 }}km/h
            </div>
          </div>
        </div>-->
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">司机室状态：</div>
            <div class="text-value" v-if="videoForm.encode29">{{ videoForm.encode29 }}</div>
          </div>
        </div>
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">速度：</div>
            <div class="text-value" v-if="videoForm.encode16">{{ videoForm.encode16 || 0 }}km/h</div>
          </div>
        </div>
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">受电弓状态：</div>
            <div class="text-value" v-if="videoForm.encode31">{{ videoForm.encode31 }}</div>
          </div>
        </div>
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">公里标：</div>
            <div class="text-value" v-if="videoForm.encode22">{{ videoForm.encode22 || 0 }}km</div>
          </div>
        </div>
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">管压：</div>
            <div class="text-value" v-if="videoForm.encode26">{{ videoForm.encode26 || 0 }}kPa</div>
          </div>
        </div>
        <!-- <div class="item-container">
          <div class="text-box">
            <div class="text-key">
              转速：
            </div>
            <div class="text-value">
              {{ videoForm.speedElectricity }}
            </div>
          </div>
        </div>-->
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">本补：</div>
            <div class="text-value" v-if="videoForm.encode15_01">{{ videoForm.encode15_01 }}</div>
          </div>
        </div>
        <div class="item-container">
          <div class="text-box">
            <div class="text-key">客货：</div>
            <div class="text-value" v-if="videoForm.encode15">{{ videoForm.encode15 }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="idxLight">
          <img v-if="videoForm.encode18" :src="currentLight" />
        </div>
        <div class="item-container" v-if="videoForm.encode18">
          <div class="text-box">
            <div class="text-key">信号灯：</div>
            <div class="text-value">{{ videoForm.encode18 }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const formData = require('./formData');

export default {
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      driverCabStatus: {
        '0': '无占用',
        '1': 'I端占用',
        '2': 'II端占用'
      },
      pantographStatus: {
        '0': '无效',
        '1': '升弓',
        '2': '降弓',
        '3': '隔离'
      },
      ben: {
        '0': '本',
        '1': '补'
      },
      ke: {
        '0': '货',
        '1': '客'
      },
      cabStatus: {
        '0': '零位',
        '1': '向后',
        '2': '向前',
        '3': '制动',
        '4': '牵引'
      },
      mapLights: {
        无灯: require('@/assets/wu.jpg'),
        绿: require('@/assets/lv.jpg'),
        黄: require('@/assets/huang.jpg'),
        双黄: require('@/assets/shuanghuang.jpg'),
        红黄: require('@/assets/honghuang.jpg'),
        红: require('@/assets/hong.jpg'),
        白: require('@/assets/bai.jpg'),
        绿黄: require('@/assets/huanglv.jpg'),
        黄2: require('@/assets/huang.jpg'),
        '': require('@/assets/wu.jpg')
      },
      currentLight: '',
      videoForm: {}
    };
  },
  mounted() {
    this.videoForm = this.form;
  },
  methods: {
    myData() {
      const ret = this.formFun(formData, this.videoForm);
      return ret;
    },
    //     /**
    //  * @param {*} formArr 表单内容
    //  * @param {*} data 接口的对象数据
    //  */
    formFun(formArr, data) {
      let result = [];
      const ret = formArr;
      if (!data) {
        result = ret;
        return result;
      }

      for (let i = 0; i < formArr.length; i += 1) {
        const d = {
          ...formArr[i]
        };
        if (formArr[i].time) {
          d.value = this.dateFormat(data[formArr[i].key], 'HH:mm:ss');
        } else if (formArr[i].obj) {
          d.value = formArr[i].obj[data[formArr[i].key]];
        } else {
          d.value = data[formArr[i].key] || data[formArr[i].defaultKey];
        }
        result.push(d);
      }
      return result;
    },
    // 格式化为指定日期格式
    dateFormat(date, fmt) {
      if (!date) {
        return date;
      }
      const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
        'H+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
      };
      const week = {
        0: '/u65e5',
        1: '/u4e00',
        2: '/u4e8c',
        3: '/u4e09',
        4: '/u56db',
        5: '/u4e94',
        6: '/u516d'
      };
      let format = fmt;
      // if (/(y+)/.test(fmt)) {
      //   format = format.replace(RegExp.$1, (date.getFullYear().toString()).substr(4 - RegExp.$1.length))
      // }
      // if (/(E+)/.test(fmt)) {
      //   format = format.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '/u661f/u671f' : '/u5468') : '') + (week as any)[date.getDay().toString()])
      // }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(format)) {
          let num = o[k];
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? num
              : ('00' + num).substr(('' + num).length)
          );
        }
      }
      return format;
    }
  },
  watch:{
    'form':{
      handler(newV,oldV){
        // console.log('变化',newV,oldV)
        this.videoForm.encode18 = ''
        this.videoForm = {}
        this.videoForm = newV;
        if(this.videoForm.encode18){
          this.currentLight = this.mapLights[this.videoForm.encode18]
        }
      },
      deep:true
    }
  }
};
</script>

<style scoped>
.container {
  height: 100%;
  background-color: #ffffff;
}
.container .item-container {
  width: 33%;
  height: 18px;
}
.container .item-container .text-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
  height: 100%;
}
.container .item-container .text-box .text-value {
  min-width: calc(100% - 72px);
  text-align: left;
  padding: 1px;
  color: rgb(44, 95, 177);
  height: 100%;
  border-bottom: 1px solid rgb(192, 196, 204);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container .item-container .text-box .text-key {
  min-width: 72px;
  text-align: right;
  color: rgb(96, 98, 102);
}
.container .content {
  height: 55%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  overflow-y: scroll;
  overflow-x:hidden;
}
.container .main {
  height: 45%;
  overflow-y: scroll;
  display: flex;
  justify-content: space-around;
  overflow-x:hidden;
}
.container .main .left {
  width: 67%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.container .main .left .item-container {
  width: 50%;
}
.container .main .right {
  width: 33%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.container .main .right .item-container {
  width: 100%;
}
</style>

